<template>
  <div>
    <yx-header @leftClick="goback">
      <span>人气推荐</span>
    </yx-header>

    <div class="list">
      <yx-gooditem
        v-for="item in recommendList"
        :key="item.id"
        :item="item"
      ></yx-gooditem>
    </div>
  </div>
</template>
<script>
import yxHeader from "@/components/yxHeader.vue";
import { useRouter } from "vue-router";
import { getRecommendList } from "@/utils/http/home";
import { reactive, toRefs } from "vue";
import yxGooditem from "@/components/yxGooditem.vue";

export default {
  components: {
    yxHeader,
    yxGooditem,
  },
  setup(props) {
    const data = reactive({
      recommendList: [],
    });
    const router = useRouter();
    const goback = () => {
      router.go(-1);
    };
    getRecommendList().then((res) => {
      console.log(res);
      data.recommendList = res.data;
    });
    return {
      goback,
      ...toRefs(data),
    };
  },
};
</script>
<style lang="scss" scoped>
.list {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  > div {
    width: 48%;
  }
}
</style>
